// 菜品列表的业务模块
console.log( '菜品列表的业务模块。。。' )

/* // webpack环境变量
console.log( __WEBPACK__ENV )// 'dev'  'prod'
let baseUrl = ''
if (__WEBPACK__ENV === 'dev') {
    baseUrl = 'http://localhost:9090/api'
} else {
    baseUrl = 'http://localhost:8080'
} */
import baseUrl from './webpack.env.js'

// 执行公用模块
import './food-common.js'

import axios from 'axios'

// const CancelToken = axios.CancelToken
// const source = CancelToken.source()
const source = axios.CancelToken.source()

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    if (!localStorage.getItem('token')) {
        // 没有token，取消本次请求
        source.cancel('缺少token数据')
    }
    return config // 放行，继续执行后面的程序
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    let res = response.data
    return res // 放行，继续执行后面的程序
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
})

let count = 0 // 数据总条数
let pages = 0 // 数据总页数
let page = 1 // 当前页码
let size = 4 // 每页数据条数

// 进入页码获取第一页数据并渲染
getPageData(page,size)

function getPageData(page,size){// 获取分页数据并渲染
    axios({
        method: 'post',
        url: baseUrl + '/food/getpage',
        data: {page,size},
        cancelToken: source.token
    })
    .then((res)=>{
        // let {data} = res
        if (res.code === 1) {
            count = res.count
            pages = res.pages
            console.log( count,pages )
            // 渲染表格
            renderTable(res.data)
            // 渲染分页
            renderPages(page,pages)
        }
        else{
            alert(res.msg)
        }
    })
    .catch((err)=>{
        console.log( '获取分页数据失败',err )
    })
}

function renderTable(arr){// 根据数据渲染表格
    // 渲染的模板
    let template1 = `<tr>
        <th>菜品名称</th>
        <th>菜品描述</th>
        <th>菜品价格</th>
        <th>菜品分类</th>
        <th>菜品图片</th>
        <th>操作</th>
    </tr>`
    // 遍历arr数组 [{item},{item},{item}]
    arr.forEach((item)=>{
        template1 += `<tr>
            <td>${item.name}</td>
            <td>${item.desc}</td>
            <td>${item.price}</td>
            <td>${item.type}</td>
            <td><img src="${item.imgurl}" alt=""></td>
            <td>
                <button class="btn btn-success btn-xs" data-toggle="modal" data-target="#my-modal"><span class="glyphicon glyphicon-pencil"></span> 编辑</button>
                <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> 删除</button>
            </td>
        </tr>`
        // 将模板插入到tbody中
        $('.table tbody').html(template1)
    })
}

function renderPages(page,pages){// 渲染分页选项
    // 渲染模板字符串
    let template2 = `<li class="prev">
        <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        </a>
    </li>`

    for (var i = 0; i < pages; i++){
        template2 += `<li class="num"><a href="#">${i + 1}</a></li>`
    }

    template2 += `<li class="next">
        <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        </a>
    </li>`

    // 添加到分页容器中
    $('.pagination').html(template2)

    // 给当前页添加选中状态
    $('.pagination li').eq(page).addClass('active')
}

// 点击 上一页
$('.pagination').on('click','.prev',function (){
    page-- // 页码减1
    if (page === 0) {// 临界值判断
        // 当前已经在第一页了
        console.log( '已经在第一页了' )
        page = 1
        return
    }
    // 切换选中项状态
    $('.num').eq(page - 1).addClass('active').siblings('.num').removeClass('active')
    // 切换页面数据
    getPageData(page,size)
})

// 点击 下一页
$('.pagination').on('click','.next',function (){
    page++ // 页码加1
    if (page > pages) {// 临界值判断
        // 当前已经在最后一页了
        console.log( '已经在最后一页了' )
        page = pages
        return
    }
    // 切换选中项状态
    $('.num').eq(page - 1).addClass('active').siblings('.num').removeClass('active')
    // 切换页面数据
    getPageData(page,size)
})

// 选中某一页
$('.pagination').on('click','.num',function (){
    // 获取当前页码
    page = $(this).children().eq(0).text()
    // console.log( page )// '1'  '2'   '3'
    // 切换选中项状态
    $('.num').eq(page - 1).addClass('active').siblings('.num').removeClass('active')
    // 切换页面数据
    getPageData(page,size)
})

// 关键字搜索
$('.btn-search').click(function (){
    // 获取输入的关键字
    let kw = $('#kw').val()
    // 空值判断
    if (!kw) {
        alert('搜索内容不能为空！')
        return
    }
    // 发送请求
    axios({
        method: 'post',
        url: baseUrl + '/food/search',
        data: {kw},
        cancelToken: source.token
    })
    .then((res)=>{
        // let {data} = res
        if (res.code === 1) {
            // console.log( res.data )// 查询到的数据
            // 渲染表格
            renderTable(res.data)
        }
        else{
            alert(res.msg)
        }
    })
    .catch((err)=>{
        console.log( '搜索失败',err )
    })
})

// 点击删除
$('.table').on('click','.btn-danger',function (){
    // 删除后端对应的数据
    let name = $(this).parent().parent().children().eq(0).text()// 要删除的菜品名称
    axios({
        method: 'post',
        url: baseUrl + '/food/del',
        data: {name},
        cancelToken: source.token
    })
    .then((res)=>{
        // let {data} = res
        alert(res.msg)
        if (res.code === 1) {
            // 前端删除对应的tr
            $(this).parent().parent().remove()
        }
    })
    .catch((err)=>{
        console.log( '删除失败',err )
    })
})


let originalname // 菜品原始名称
// 点击编辑
$('.table').on('click','.btn-success',function (){
    // 获取原始数据
    originalname = $(this).parent().parent().children().eq(0).text()// 菜品名称
    console.log( originalname )
    let desc = $(this).parent().parent().children().eq(1).text()// 菜品描述
    let price = $(this).parent().parent().children().eq(2).text()// 菜品价格
    let type = $(this).parent().parent().children().eq(3).text()// 菜品类型
    let imgurl = $(this).parent().parent().children().eq(4).find('img').attr('src')// 图片地址

    // 展示原始数据
    $('#name').val(originalname)
    $('#desc').val(desc)
    $('#price').val(price)
    $('#type').val(type)
    $('#imgurl').val(imgurl)
})

// 编辑-上传图片
$('#upload').submit(function (e){
    e.preventDefault()// 阻止表单默认提交
    // 创建FormData对象
    let formData = new FormData(this)
    // 发送请求
    axios.post(baseUrl + '/file/upload',formData,{cancelToken: source.token})
    .then((res)=>{
        // let {data} = res
        alert(res.msg)
        if (res.code === 1) {
            // 上传成功
            $('#imgurl').val(res.imgurl)
        }
    })
    .catch((err)=>{
        console.log( '上传失败',err )
    })
})

// 点击修改
$('.btn-update').click(function (){
    // 获取表单内容
    let name = $('#name').val()
    let desc = $('#desc').val()
    let price = $('#price').val()
    let type = $('#type').val()
    let imgurl = $('#imgurl').val()

    // 发送请求
    axios({
        method: 'post',
        url: baseUrl + '/food/update',
        data: {originalname,name,desc,price,type,imgurl},
        cancelToken: source.token
    })
    .then((res)=>{
        // let {data} = res
        alert(res.msg)
        if (res.code === 1) {
            // 修改成功后隐藏模态框
            // $('#my-modal').modal('hide')
            location.reload()
        }
    })
    .catch((err)=>{
        console.log( '修改失败',err )
    })
})